<template>
  <div :class="pageWithSidebar">
    <user-settings-sidebar />
    <router-view />
  </div>
</template>

<script>
import UserSettingsSidebar from '@/views/users/settings/user-settings-sidebar';
import { mapState } from 'vuex';

export default {
  name: 'UserSettings',
  components: { UserSettingsSidebar },
  computed: {
    // 有侧边栏的页面调用这个方法生成样式
    ...mapState(['sidebarCollapsed', 'invisibleSidebar']),
    // 有侧边栏的页面调用这个方法生成样式
    pageWithSidebar() {
      let className = 'page-with-sidebar';
      if (window.innerWidth < 1200 || this.sidebarCollapsed) className += ' sidebar-collapsed';
      if (window.innerWidth < 768 || this.invisibleSidebar) className += ' invisible-sidebar';
      return className;
    },
  },
};
</script>

<style></style>
